<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style>
			/* 去除所有标签中自带的内外边距 */
			* {
				margin: 0;
				padding: 0;
			}
			li {
				/* 去除列表项自带点 */
				list-style: none;
			}
			.box {
				width: 270px;
				height: 180px;
				border: 1px solid #ccc;
				margin: 100px;
			}
			.box li a {
				line-height: 45px;
				color: #666;
				text-decoration: none;
				/* 转为块状 */
				display: block;
				padding-left: 15px;
			}
			.box li a:hover {
				color: darkred;
				background-color: #eee;
			}
			.box li {
				border-bottom: 1px solid #ccc;
			}
		</style>
	</head>
	<body>
		<!-- <h1>标题1</h1> -->
		<ul class="box">
			<li><a href="#">公司动态</a></li>
			<li><a href="#">产品资讯</a></li>
			<li><a href="#">业界资讯</a></li>
		</ul>
	</body>
</html>